<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.staticfile.org/react/17.0.1/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/17.0.1/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>

<div id="test"></div>

<script type="text/babel">
    //类式组件

    class Count extends React.Component {

        constructor(props) {
            console.log("Count constructor")
            super(props);

            //初始化状态
            this.state = {
                count: 0
            }
        }

        //state的值任何时候都取决props的值，那么可以使用
        static getDerivedStateFromProps(props, state) {
            console.log('getDerivedStateFromProps,', props, state)
            return true;
        }

        // //组件将要挂载的钩子
        // UNSAFE_componentWillMount() {
        //     console.log("count componentWillMount")
        // }

        //组件挂载完毕的钩子 --常用 一般在这个钩子中做一些初始化的事，例如开启定时器，发送网络请求，订阅消息
        componentDidMount() {
            console.log("count componentDidMount")
        }

        //组件卸载的钩子
        componentWillUnmount() {
            console.log("count componentWillUnmount")
        }

        //组件是否应该被更新 钩子
        shouldComponentUpdate() {
            console.log("count shouldComponentUpdate")
            return true;
        }

        // UNSAFE_componentWillUpdate() {
        //     console.log("count componentWillUpdate")
        // }

        //快照---在更新之前获取快照值
        getSnapshotBeforeUpdate() {
            console.log("count getSnapshotBeforeUpdate")
            return true;
        }

        componentDidUpdate(preProps, preState, snapshotValue) {
            console.log("count componentDidUpdate", preProps, preState, snapshotValue)
        }


        add = () => {
            const {count} = this.state
            this.setState({count: count + 1})
        }

        death = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }

        //强制更新按钮
        force = () => {
            this.forceUpdate()
        }

        render() {
            console.log("count render")
            const {count} = this.state
            return (
                <div>
                    <h2>点我求和为{count}</h2>
                    <button onClick={this.add}>点我+1</button>
                    <button onClick={this.death}>卸载组件</button>
                    <button onClick={this.force}>不更改任何状态数据，强制更新</button>
                </div>
            )
        }
    }


    ReactDOM.render(<Count/>, document.getElementById("test"))
</script>
</body>
</html>